<template>
  <div class="send-short-message">
    <el-popover
      v-if="isSendSms"
      v-model="visible"
      width="420"
      trigger="click"
      placement="bottom-start"
      @show="getSmsConfig"
    >
      <i slot="reference" class="V7_iconfont V7_iconV7tubiao_duanxin sms"></i>
      <el-tabs v-model="activeName" @tab-click="tabChange">
        <el-tab-pane label="单个发送" name="singleSend">
          <shortMessageContent
            ref="singleShortMessage"
            :type="activeName"
            :autographList="autographList"
            :templetList="templetList"
            @resetCont="resetCont"
            @closePop="closePop"
          />
        </el-tab-pane>
        <el-tab-pane label="群发" name="batchSend">
          <shortMessageContent
            ref="batchShortMessage"
            :type="activeName"
            :autographList="autographList"
            :templetList="templetList"
            @resetCont="resetCont"
            @closePop="closePop"
          />
        </el-tab-pane>
      </el-tabs>
    </el-popover>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import shortMessageContent from './components/shortMessageContent.vue'
import { commonAction, isHasFuncOrMenus } from '@/utils/common'
import { v4 as uuidv4 } from 'uuid'
import { CommonModule } from '@/store/modules/common'
@Component({
  name: 'sendShortMessage',
  components: {
    shortMessageContent
  }
})
export default class SendShortMessage extends Vue {
  [x: string]: any
  @Ref() private readonly singleShortMessage
  @Ref() private readonly batchShortMessage
  private visible: boolean = false

  private activeName: any = 'singleSend'

  private autographList: any = []

  private templetList: any = []

  private isSendSms: boolean = false

  get getAccountId () {
    return (CommonModule as any).session.user.accountId || ''
  }

  private tabChange (val: any) {
    if (this.activeName === 'singleSend') {
      this.singleShortMessage.clearFormValid()
    } else {
      this.batchShortMessage.clearFormValid()
    }
  }

  private getUUID () {
    return uuidv4().replace(/-/g, '')
  }

  private closePop () {
    this.visible = false
  }

  private resetCont () {
    this.$nextTick(() => {
      if (this.activeName === 'singleSend') {
        this.singleShortMessage.clearContent()
      } else {
        this.batchShortMessage.clearContent()
      }
    })
  }

  private getTemplateOrSign (url: any, type: any, action: any) {
    const params = {
      url,
      method: 'POST',
      hideLoading: true,
      data: {
        requestId: this.getUUID(),
        action,
        param: {
          customer: this.getAccountId,
          needContent: type === 'templetList',
          status: 2
        }
      }
    }
    commonAction(params).then(res => {
      if (res.code === '0000200') {
        this[type] = res.data || []
      }
    })
  }

  private getSmsConfig () {
    this.getTemplateOrSign('/sms-api/sms/manager/template/query-init', 'templetList', 'MANAGER_TEMPLATE_QUERY')
    this.getTemplateOrSign('/sms-api/sms/manager/sign/query-init', 'autographList', 'MANAGER_SIGN_QUERY')
  }

  private mounted () {
    if (isHasFuncOrMenus('sms_send', this.$store.state.common.session.user, true)) { // 发送短信权限
      this.isSendSms = true
    }
  }
}
</script>
<style lang="stylus" scoped>
.sms
  margin-right 20px
  font-size 18px
  cursor pointer
</style>
